<style>
    .title_style {
        width: 450px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
<div class="col-lg-12">
    <div>
        <div class="card col-md-12">
            <div class="card-header">
                <h4 style="font-size: 20px">商品列表</h4>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th class="col-sm-1 col-xs-12">#</th>
                            <th class="col-sm-5 col-xs-12">商品名称</th>
                            <th class="col-sm-2 col-xs-12">单价</th>
                            <th class="col-sm-2 col-xs-12">状态</th>
                            <th class="col-sm-2 col-xs-12">操作</th>
                        </tr>
                        </thead>
                        <tbody id="product-list-body">
                        <tr>
                            <td>没有信息</td>
                            <td>没有信息</td>
                            <td>没有信息</td>
                            <td>没有信息</td>
                            <td>没有信息</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <nav style="width: 500px;margin: auto">
                    <ul class="pagination" id="page_nav-ul" style="display:flex;justify-content:space-between">
                        <li class="disabled">
                            <a>
                                <span><i class="mdi mdi-chevron-left"></i></span>
                            </a>
                        </li>
                        <li class="active"><a>1</a></li>
                        <li class="disabled"><a>...</a></li>
                        <li><a onclick="get_page(2)" style="cursor: pointer">2</a></li>
                        <li class="disabled">
                            <a>
                                <span><i class="mdi mdi-chevron-right"></i></span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).ready(function () {
        get_page(1);
    })

    // function load_page_nav(page_sum, page) {
    //     if (page_sum <= 0 || page <= 0) {
    //         document.getElementById("page_nav-ul").innerHTML = "<li class=\"disabled\"><a><span><i class=\"mdi mdi-chevron-left\"></i></span></a></li><li class=\"disabled\"><a><span><i class=\"mdi mdi-chevron-right\"></i></span></a></li>";
    //         return;
    //     }
    //     var pageNavString = "";
    //     //在第一页
    //     if (page === 1) {
    //         pageNavString += "<li class=\"disabled\">" +
    //             "  <a>" +
    //             "     <span><i class=\"mdi mdi-chevron-left\"></i></span>" +
    //             "  </a>" +
    //             "</li>";
    //         pageNavString += "<li class=\"active\"><a>1</a></li>";
    //     } else {
    //         pageNavString += "<li class=\"disabled\">\n" +
    //             "  <a onclick=\"get_page(" + (page - 1) + ")\" style=\"cursor: pointer\">\n" +
    //             "     <span><i class=\"mdi mdi-chevron-left\"></i></span>\n" +
    //             "  </a>\n" +
    //             "</li>";
    //         pageNavString += "<li><a onclick=\"get_page(" + (1) + ")\" style=\"cursor: pointer\">1</a></li>";
    //     }
    //     for (var i = 2; i < page_sum; i++) {
    //         if ((page - 3) === i) {
    //             pageNavString += "<li class=\"disabled\"><a>...</a></li>";
    //         }
    //         if ((page - 3 < i) && (i < page + 3)) {
    //             if (page === i) {
    //                 pageNavString += "<li class=\"active\"><a onclick=\"get_page(" + i + ")\" style=\"cursor: pointer\">" + i + "</a></li>";
    //             } else {
    //                 pageNavString += "<li><a onclick=\"get_page(" + i + ")\" style=\"cursor: pointer\">" + i + "</a></li>";
    //             }
    //         }
    //         if ((page + 3) === i) {
    //             pageNavString += "<li class=\"disabled\"><a>...</a></li>";
    //         }
    //     }
    //     //在最后一页
    //     if (page_sum === page) {
    //         if (page_sum > 1) {
    //             pageNavString += "<li class=\"active\"><a>" + page_sum + "</a></li>";
    //         }
    //         pageNavString += "<li class=\"disabled\">\n" +
    //             "  <a>" +
    //             "     <span><i class=\"mdi mdi-chevron-right\"></i></span>\n" +
    //             "  </a>\n" +
    //             "</li>";
    //         pageNavString += "</div>";
    //     } else {  //不在最后一页
    //         if (page_sum > 1) {
    //             pageNavString += "<li><a onclick=\"get_page(" + page_sum + ")\" style=\"cursor: pointer\">" + page_sum + "</a></li>";
    //         }
    //         pageNavString += "<li>" +
    //             "  <a onclick=\'get_page(" + (page + 1) + ")\' style=\'cursor: pointer\'>\n" +
    //             "     <span><i class=\"mdi mdi-chevron-right\"></i></span>\n" +
    //             "  </a>" +
    //             "</li>";
    //     }
    //     document.getElementById("page_nav-ul").innerHTML = pageNavString;
    // }

    function get_page(page) {
        var htmlString = "";
        var data = product_seller_list(localStorage.getItem("token"), page - 1);
        for (let i = 0; i < data.products.length; i++) {
            htmlString += "<tr><td style='line-height: 30px'>" + ((page - 1) * 10 + 1 + i) + "</td>" +
                "<td style='line-height: 30px'><div class='title_style'>" + data.products[i].title + "</div></td>" +
                "<td style='line-height: 30px'>￥" + data.products[i].price.toFixed(2) + "</td>" +
                "<td style='line-height: 30px'>" + trans_to_span(data.products[i].status) + "</td>" +
                "<td><a class='mdi mdi-settings' style='cursor: pointer;font-size: 20px'  title='管理' onclick='product_detail_page(" + data.products[i].productId + ")'></a>" +
                "<a class='mdi mdi-publish' style='cursor: pointer;font-size: 20px' title='升级VIP' onclick='product_vip_page(" + data.products[i].productId + ")'></a>" +
                ((data.products[i].status >= 1 && data.products[i].status <= 4) ? "<a class='mdi mdi-delete' style='cursor: pointer;font-size: 20px' title='停售' onclick='product_seller_delete(" + data.products[i].productId + ")'></a>" : "<a class='mdi mdi-briefcase-upload' style='cursor: pointer;font-size: 20px' title='重新上架' onclick='product_seller_reshelve(" + data.products[i].productId + ")'></a>") +
                "</td></tr>";
        }
        document.getElementById("product-list-body").innerHTML = htmlString;
        load_page_nav(Math.ceil(data.total / 10), page);
    }

    function trans_to_span(status_code) {
        if (status_code === 0) {
            return '<span class="label label-dark">停售中</span>';
        } else if (status_code === 1) {
            return '<span class="label label-primary">售卖中</span>';
        } else if (status_code === 2) {
            return '<span class="label label-yellow">普通VIP</span>';
        } else if (status_code === 3) {
            return '<span class="label label-yellow">超级VVIP</span>';
        } else if (status_code === 4) {
            return '<span class="label label-yellow">至尊VVVIP</span>';
        } else {
            return '<span class="label label-danger">状态异常</span>';
        }
    }
</script>